<template>
  <div>
    <header>留言板 > 列表</header>
    <ul class="main">
      <li v-for="message in messageData">
        <p>用户名：{{message.username}}</p>
        <p>留言内容：{{message.content}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "message-list",
    beforeMount(){
      this.getMessageList();
    },
    data() {
      return {
        messageData: [],
      }
    },
    methods: {
      getMessageList() {
        this.messageData = JSON.parse(localStorage.getItem('message'));
      }

    }
  }
</script>

<style scoped>
  header {
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
  }
  .main {
    padding: 10px 10px 10px 20px;
  }
  .main li{
    margin: 10px;
  }
  .main li p{
    margin: 6px;
  }
</style>


